<!--
 * @Author: Dee Dee
 * @Date: 2023-08-14 14:45:27
 * @LastEditors: Dee Dee
 * @LastEditTime: 2023-08-21 14:42:03
 * @FilePath: /培训认证系统20230814/src/views/vadmin/home/components/partTwo/left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <el-card class="rank-card">
        <el-row class="card-header">
            <el-col :span="18" class="header-title">今日学习排行</el-col>
            <el-col :span="6" class="header-more" v-if="isMobile">
                <span @click="viewMore">查看更多</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table 
                    :show-header="false" 
                    v-loading="loading" 
                    :data="tableData" 
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                >
                    <el-table-column prop="date" label="排名" width="80">
                        <template slot-scope="scope">
                            <div class="rank-number" :class="'rank-' + (scope.$index + 1)">{{ scope.$index + 1 }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" min-width="100">
                    </el-table-column>
                    <el-table-column prop="address" label="时长" width="80">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import { isMobileViewport } from "@/utils/device";

export default {
    name: "StudyRank",
    data() {
        return {
            // 遮罩层
            loading: true,
            tableData: [
             
            ],
            isMobile: false
        };
    },

    computed: {
        ...mapState(["settings"]),
        variables() {
            return variables;
        },
        theme() {
            return this.$store.state.settings.theme;
        },
    },

    mounted() {
        this.checkDeviceType();
        window.addEventListener('resize', this.checkDeviceType);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.checkDeviceType);
    },
    created() {
        this.getList();
    },
    methods: {
        /** 检查设备类型 */
        checkDeviceType() {
            this.isMobile = isMobileViewport();
        },
        /** 查询列表 */
        getList() {
            this.loading = false;
            // 这里只是模拟数据，实际应该从API获取
        },
        /** 行样式 */
        tableRowClassName({row, rowIndex}) {
            if (rowIndex < 3) {
                return 'top-rank-row';
            }
            return '';
        },
        /** 查看更多 */
        viewMore() {
            // 跳转到排行详情页
            this.$message.info('查看更多排行');
        }
    },
};
</script>

<style lang="scss" scoped>
.rank-card {
    height: 100%;
}

.card-header {
    margin-bottom: 20px;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.header-more {
    text-align: right;
    
    span {
        color: #999;
        font-size: 14px;
        cursor: pointer;
        
        &:hover {
            color: #1890ff;
        }
    }
}

.rank-number {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #f5f5f5;
    margin: 0 auto;
    font-weight: bold;
    
    &.rank-1 {
        background: #f5ba4a;
        color: white;
    }
    
    &.rank-2 {
        background: #a1b1c9;
        color: white;
    }
    
    &.rank-3 {
        background: #ce7b4e;
        color: white;
    }
}

@media screen and (max-width: 768px) {
    .header-title {
        font-size: 15px;
    }
    
    .header-more {
        span {
            font-size: 12px;
        }
    }
    
    :deep(.el-table) {
        font-size: 13px;
    }
    
    .rank-number {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
    }
    
    :deep(.el-table td) {
        padding: 8px 0;
    }
}
</style>
  